<template>
	<view class="container">
		<view class="lists">
			<view v-if="datas.length == 0">
				<emptyPage :title="$t(`暂无模板~`)"></emptyPage>
			</view>
			<view class="item" v-for="n in datas">
				<view @click="seleTemp(n)">
					<view class="top">
						{{n.temp_name}}【{{n.name}}】
					</view>
					<view class="content">
						<view class="from_to_bg">
							<view class="from_bg">
								<view class="province">
									{{n.start_province}} {{n.start_city}}
								</view>
								<view class="address">{{n.start_address}}</view>
							</view>
							<view class="center">
								<image class="direc" src="/static/images//cust_direc.png"></image>
							</view>
							<view class="to_bg">
								<view class="province">
									{{n.end_province}} {{n.end_city}}
								</view>
								<view class="address">{{n.end_address}}</view>
							</view>
						</view>
						<!-- <view class="amount">{{n.start_name}} {{n.start_phone}}</view> -->
						
					</view>
				</view>
				<view class="bottom">
					<view class="left">一装一卸</view>
					<view class="right">
						<view class="button"  @click="gotoDetail(n.id)">
							<image class="icon" src="/static/images/cust_edit.png"></image>
							<view class="text">编辑</view>
						</view>
						<view class="button" @click="delTemp(n.id)">
							<image class="icon" src="/static/images/cust_del.png"></image>
							<view class="text">删除</view>
						</view>
					</view>
				</view>
			</view><!--item end-->
			
		</view><!--lists end-->
		<view class="footer">
			<view class="submit-btn" @click="gotoTemp()">新建模板</view>
		</view>
	</view>
</template>

<script>
	import {getTempList,tempDel} from "@/api/logistic.js";
	import emptyPage from '@/components/emptyPage';
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				datas:[],
				operationing:false
			}
		},
		onLoad(options) {
		},
		onShow() {
			this.getData();
		},
		methods: {
			gotoDetail(id){
				uni.navigateTo({
					url:'/pages/news/publish/template/edit?id='+id
				})
			},
			gotoTemp(){
				uni.navigateTo({
					url:'/pages/news/publish/template/template'
				})
			},
			//选择模板
			seleTemp(data){
				let params = {
					temp_name:data.temp_name,
					start_province:data.start_province,
					start_city:data.start_city,
					start_distinct:data.start_distinct,
					start_address:data.start_address,
					start_name:data.start_name,
					start_phone:data.start_phone,
					start_lat:data.start_lat,
					start_lon:data.start_lon,
					end_province:data.end_province,
					end_city:data.end_city,
					end_distinct:data.end_distinct,
					end_address:data.end_address,
					end_name:data.end_name,
					end_phone:data.end_phone,
					end_lat:data.end_lat,
					end_lon:data.end_lon,
					type:data.type,
					car_length_ids:data.car_length_ids,
					car_type_ids:data.car_type_ids,
					distance:data.distance,
					car_type_len:data.car_type_len,
					name:data.name,
					goods_id:data.goods_id,
					wrap_way_id:data.wrap_way_id, 
					wrap_way:data.wrap_way,
					weight_start:data.weight_start,
					weight_end:data.weight_end,
					volumn_start:data.volumn_start,
					volumn_end:data.volumn_end,
					num:data.num
				};
				console.info(params);
				let pages = getCurrentPages() ;
				let prevPage = pages[pages.length -2];
				prevPage.$vm.temp_data_receive(params) ;
				uni.navigateBack();
			},
			delTemp(id){
				if(this.operationing){
					return;
				}
				
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定删除模板？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在处理',
							})
							tempDel(id).then(res => {;
								console.info(res.data)
								that.operationing = false;
								uni.hideLoading();
								if(res.status == 200){
									that.getData();
									uni.showToast({
										icon:'success',
										title:res.msg
									})
								}else{
									uni.showToast({
										icon:'error',
										title:res.msg
									})
								}
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
				        }//end if
				    }//end success method
				});
			},
			getData(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				getTempList({}).then((res) => {
					let data = res.data;
					 console.info(data);
					 that.datas = data.list;
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f2f2f2;
	}
	.container{
		display: flex;
		flex-direction: column;
		.lists{
			display: flex;
			flex-direction: column;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			margin-bottom: 100rpx;
			.item{
				display: flex;
				flex-direction: column;
				background-color: white;
				margin: 30rpx 30rpx 0rpx 30rpx;
				.top{
					background-color: blanchedalmond;
					color: darkorange;
					font-size: 28rpx;
					padding: 15rpx 30rpx;
				}
				.content{
					padding: 30rpx;
					display: flex;
					flex-direction: column;
					border-bottom: 1rpx dashed #f1f1f1;
					.from_to_bg{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						.from_bg{
							display: flex;
							flex-direction: column;
							.province{
								font-size: 30rpx;
								font-weight: bold;
								color: black;
							}
							.address{
								font-size: 28rpx;
								color: gray;
							}
						}
						.center{
							width: 100rpx;
							.direc{
								width: 100rpx;
								height: 100rpx;
							}
						}
						.to_bg{
							display: flex;
							flex-direction: column;
							.province{
								font-size: 30rpx;
								font-weight: bold;
								color: black;
							}
							.address{
								font-size: 28rpx;
								color: gray;
							}
						}
					}
					.name{
						margin-top: 10rpx;
						font-size: 28rpx;
						color: gray;
					}
					.amount{
						font-size: 28rpx;
						color: gray;
					}
				}//content end
				.bottom{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					.left{
						font-size: 28rpx;
						color: gray;
					}
					.right{
						display: flex;
						flex-direction: row;
						align-items: center;
						.button{
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-left: 20rpx;
							.icon{
								width: 26rpx;
								height:26rpx;
							}
							.text{
								font-size: 28rpx;
								color: gray;
								margin-left: 5rpx;
							}
						}
					}
				}//bottom end
			}//item end
		}//lists end
		.footer{
			height: 80rpx;
			width: 100%;
			position: fixed;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding-bottom: 0;  
			padding-bottom: constant(safe-area-inset-bottom);  
			padding-bottom: env(safe-area-inset-bottom); 
			.submit-btn{
				background-color: $uni-main-color;
				color: white;
				font-size: 28rpx;
				height: 80rpx;
				width: 100%;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
	
</style>
